CSSの基本(11)−サイズを指定する
今週はCSSを使って幅や高さを指定する方法を解説します。掲載する写真のサイズを指定する場合をはじめ、文章の横幅を指定する場合、表組みの大きさを指定する場合、などサイズ指定が必須となる場面は多々あります。必ずマスターするようにしてください

→ CSSで幅を指定する
 
CSSで幅を指定する場合は、widthプロパティを利用し、その値に幅の数値を記述します。このとき、数値を「単位付き」で記述するのを忘れないようにしてください。たとえば、横幅を100ピクセルにしたい場合は「width:100px」と記述します。以下は、画像の幅を100ピクセルに指定した場合のサンプルです。
<IMG src="tree.jpg" style="width:100px">
サンプルページ


→ CSSで高さを指定する
 
高さを指定する場合は、heightプロパティを利用します。この場合も、高さを「単位付き」の数値で指定しなければいけません。なお、画像を表示する際に、幅(width)と高さ(height)の両方を指定すると、以下のサンプルのように縦横の比率がおかしくなる場合もあります。注意してください。
<IMG src="tree.jpg" style="width:200px; height:300px"> サンプルページ


→ CSSで文字幅を制限する
 
もちろん、widthやheightのプロパティをIMG以外のタグに使用することも可能です。たとえば、DIVタグ(クラス名"column")の幅をwidthプロパティで指定し、その中に文章を記述すると、文章の幅を決まったサイズ内に収めることができます。
<STYLE type="text/css">
DIV.column{
    width:300px;
    color:#FFFFFF;
    background-color:#669900;
}
    :
</STYLE>

<BODY>
    :
CSSを使って幅や高さを指定する場合は、widthプロパティやheightプロパティを利用します。このとき、幅や高さに単位を付けて指定するのを忘れないようにしてください。たとえば、ピクセル数で指定する場合は「px」、センチメートルで指定する場合は「cm」と単位を記述します。
    :
サンプルページ


PCpylg}Wz O~yz Yahoo yV NTT-X Store

z[y[W NWbgJ[h COiq [ COsI COze